<template>
	<view class="print-setting-box">
		<lai-tab :tabList="tabList" :lineWidth="35" @onTabsClick="onTabsClick" :type="type"></lai-tab>
		<lai-notice text="*注：添加云打印机时，请确保云打印机已经开机并联网" :duration="5000"></lai-notice>
		<view class="set-print" v-show="!type">
			<view class="top">
				<view class="name">打印机1</view>
				<view class="scan" v-if="!id" @click="onScanCode">
					<image src="../../../static/images/icon/扫码.png" style="width: 40rpx; height: 40rpx; vertical-align: bottom; margin-right: 10rpx"></image>
					扫码绑定
				</view>
				<view v-if="id" style="font-size: 24rpx; color: #6c6c6c; flex: 1; text-align: center">已添加</view>
				<view class="print-pager" v-if="id" @click="printTest">打印测试单</view>
				<view class="delete" v-if="id" @click="onDel"><u-icon name="trash" size="20"></u-icon></view>
			</view>
			<view class="content">
				<u--form labelPosition="left" label-width="90" :model="formData" :rules="rules" ref="uForm">
					<u-form-item label="打印机名称:" prop="name" borderBottom ref="item1">
						<u--input
							:customStyle="{
								backgroundColor: '#F3F4F6',
								padding: '5rpx 20rpx',
								color: '#999',
								border: 'none'
							}"
							v-model="formData.name"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item label="序列号(SN):" prop="sn" borderBottom ref="item1">
						<u--input
							:disabled="id"
							:customStyle="{
								backgroundColor: '#F3F4F6',
								padding: '5rpx 20rpx',
								color: '#999',
								border: 'none'
							}"
							border="surround"
							v-model="formData.sn"
						></u--input>
					</u-form-item>
					<u-form-item label="打印机Key:" prop="key" borderBottom ref="item1">
						<u--input
							:disabled="id"
							:customStyle="{
								backgroundColor: '#F3F4F6',
								padding: '5rpx 20rpx',
								color: '#999',
								border: 'none'
							}"
							v-model="formData.key"
							border="surround"
						></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="show-style" v-show="type">
			<view class="content">
				<li-form-item label="打印类型" required>
					<uni-data-select v-model="formData.templateId" :localdata="range" @change="change"></uni-data-select>
					<!-- <u-checkbox-group v-model="formData.templateId" placement="column" @change="change($event)">
						<u-checkbox
							activeColor="#f3c45d"
							:customStyle="{ marginBottom: '8px' }"
							v-for="(item, index) in range"
							:key="index"
							:value="item.id"
							:label="item.name"
							:name="index"
						></u-checkbox>
					</u-checkbox-group> -->
				</li-form-item>
				<li-form-item label="打印份数" required>
					<u--input
						:customStyle="{
							backgroundColor: '#F3F4F6',
							padding: '5rpx 20rpx',
							color: '#999',
							border: 'none'
						}"
						v-model="formData.copies"
						border="surround"
					></u--input>
				</li-form-item>

				<view class="hr"></view>

				<view class="bottom">
					<view class="title">结账单</view>
					<view class="preview" :style="{ padding: formData.templateId === 1 ? '0 50rpx' : '0 80rpx' }">
						<view style="line-height: 40rpx; font-size: 26rpx; color: #cacaca">预览效果</view>
						<view class="preview-box" v-if="formData.templateId === 1">
							<view style="font-size: 40rpx; font-weight: 600; margin-top: 30rpx; text-align: center">#07号桌</view>
							<!-- <view style="font-size: 35rpx; text-align: center; margin-top: 10rpx">取餐号：A001</view> -->
							<view style="margin-top: 30rpx; line-height: 60rpx; border-bottom: 2rpx dashed #b8b8b8; text-align: center">下单时间：2024-11-25 10：35：10</view>

							<view class="product-info" style="border-bottom: 2rpx dashed #b8b8b8">
								<view class="name">菜品</view>
								<view class="number">数量</view>
								<view class="price">金额</view>
							</view>

							<view class="product-info">
								<view class="name">原味煎饼果子</view>
								<view class="number">1（份）</view>
								<view class="price">15.50</view>
							</view>
							<view class="product-info">
								<view class="name">陕西肉夹馍</view>
								<view class="number">2（份）</view>
								<view class="price">8.00</view>
							</view>
							<view class="product-info" style="margin-bottom: 30rpx; border-bottom: 2rpx dashed #b8b8b8">
								<view class="name">正宗凉皮</view>
								<view class="number">1（份）</view>
								<view class="price">1.00</view>
							</view>

							<view class="df">
								<view>原价</view>
								<view>￥49.00 元</view>
							</view>

							<view class="df">
								<view>优惠</view>
								<view>￥8.00 元</view>
							</view>
							<view class="df">
								<view>应付</view>
								<view>￥41.00 元</view>
							</view>
							<view style="height: 30rpx; border-bottom: 2rpx dashed #b8b8b8"></view>
							<view class="df" style="margin-bottom: 50rpx">
								<view>微信支付</view>
								<view>￥41.00 元</view>
							</view>
						</view>
						<view class="kitchen-preview" v-else>
							<!-- 放置图片 -->
							<view style="font-size: 40rpx; font-weight: 600; margin-top: 30rpx; text-align: center">#07号桌</view>
							<view style="margin-top: 30rpx; line-height: 60rpx; border-bottom: 2rpx dashed #b8b8b8; text-align: center">下单时间：2024-11-25 10：35：10</view>
							<view class="df fz" style="padding-top: 30rpx">
								<view>烧鸭</view>
								<view>×1（规格1）</view>
							</view>
							<view style="line-height: 40rpx; margin-bottom: 20rpx">加料：但糖水</view>
							<view class="dashed"></view>
							<view class="df fz" style="padding: 20rpx 0">
								<view>烧鸭</view>
								<view>×1（规格1）</view>
							</view>
							<view class="dashed"></view>

							<view class="fz" style="padding: 30rpx 0">备注:不打包</view>
							<view class="dashed" style="margin-bottom: 100rpx"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer-btn">
			<!-- :style="{ width: type ? '100%' : '45%' }" -->
			<view v-if="!type" class="btn" @click="onAdd">{{ id ? '编辑' : '新增' }}云打印机</view>
			<view v-if="type" class="btn" @click="onAdd">保存</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="show" title="温馨提示" showCancelButton content="确认删除吗？" @cancel="cancel" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
import { scanCode } from '../../../utils/scan';
export default {
	name: 'printSetting',
	data() {
		return {
			type: 0,
			tabList: [
				{ name: '云打印机设置', value: 0 },
				{ name: '小票格式', value: 1 }
			],
			formData: {
				name: '',
				sn: '',
				key: '',
				templateId: 1,
				copies: 1
			},
			rules: {
				name: {
					required: true,
					message: '请输入打印机名称',
					trigger: ['blur', 'change'],
					type: 'string'
				},
				sn: {
					required: true,
					message: '请输入序列号',
					trigger: ['blur', 'change'],
					type: 'string'
				},
				key: {
					required: true,
					message: '请输入打印机Key',
					trigger: ['blur', 'change'],
					type: 'string'
				}
			},
			range: [],
			id: null,
			show: false,
			printInfo: {},
			template: '' // 后面换成相片，选中展示的模板
		};
	},
	onLoad({ row }) {
		if (row) {
			const item = JSON.parse(row);
			this.id = item.id;
			this.formData = item;
		} else {
			this.id = 0;
		}
		this.getPrintTemplte();
	},
	methods: {
		onTabsClick(e) {
			this.type = e.value;
		},
		async onAdd() {
			const { name, sn, key } = this.formData;
			if (this.type && (!name || !key || !sn)) {
				return this.$refs.uToast.show({
					type: 'error',
					message: '云打印设置输入错误'
				});
			}

			// 云打印设置
			await this.$refs.uForm.validate();
			if (this.id) {
				await this.$api.editPrintInfo(this.formData);
				uni.navigateBack();
			} else {
				await this.$api.addPrintInfo(this.formData);
				uni.navigateBack();
			}

			// if (!this.type) {
			// 	// 云打印设置
			// 	await this.$refs.uForm.validate();
			// 	await this.$api.addPrintInfo(this.formData);
			// 	uni.navigateBack();
			// } else {
			// 	await this.$api.addPrintInfo(this.formData);
			// 	uni.navigateBack();
			// }
		},
		// 删除
		onDel() {
			this.show = true;
		},
		async confirm() {
			await this.$api.delPrintInfo({ id: this.id });
			this.show = false;
			await this.$refs.uToast.show({ type: 'success', message: '解绑成功' });
			uni.navigateBack();
		},
		cancel() {
			this.show = false;
		},
		// 测试打印单
		async printTest() {
			await this.$api.testPrint({ sn: this.formData.sn });
			this.$refs.uToast.show({ type: 'success', message: '打印成功' });
		},
		// 打印模板
		async getPrintTemplte() {
			const res = await this.$api.printTemplate();
			this.range = res.data.map((v) => ({ ...v, text: v.name, value: v.id }));
			if (this.id) {
				this.template = this.range[this.range.findIndex((v) => v.id === this.formData.templateId)].content;
			}
		},
		// 选中数据
		change(e) {
			console.log(e);
			this.template = this.range[this.range.findIndex((v) => v.id === e)].content;
		},
		// 扫码绑定
		async onScanCode() {
			const res = await scanCode();
			console.log(res);
			if (res.result) {
				const arr = res.result.split(',');
				if (arr.length > 2) {
					this.formData.sn = res.result.split(',')[0];
					this.formData.key = res.result.split(',')[1];
				} else {
					uni.showToast({
						title: '请扫描正确的二维码',
						icon: 'none',
						duration: 6000
					});
				}
			}
		}
	}
};
</script>

<style scoped lang="scss">
.print-setting-box {
	margin: 0 10rpx;
	background-color: #fff;
	min-height: 100vh;
	.set-print {
		.top {
			margin: 0 20rpx;
			margin-top: 10rpx;
			padding-bottom: 7rpx;
			display: flex;
			height: 70rpx;
			align-items: flex-end;
			border-bottom: 1px dashed #b8b8b8;
			.name {
				margin-left: 10rpx;
				font-size: 30rpx;
			}
			.scan {
				flex: 1;
				text-align: end;
				color: #f3c45d;
			}
			.print-pager {
				width: 160rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #f3c45d;
				color: #f3f4f6;
				font-size: 26rpx;
				margin-right: 20rpx;
			}
		}
		.content {
			padding: 20rpx;
		}
	}
	.show-style {
		padding-bottom: 120rpx;
		.content {
			padding: 20rpx;
			.hr {
				margin: 20rpx auto;
				width: 95%;
				height: 2rpx;
				background-color: #f3f3f3;
			}
			.bottom {
				.title {
					padding-top: 30rpx;
					font-size: 34rpx;
					font-weight: 600;
				}
				.preview {
					// height: 600rpx;
					margin-top: 20rpx;
					.preview-box {
						// height: 840rpx;
						border: 2rpx solid #ccc;
						font-size: 24rpx;
						padding: 0 20rpx;
						padding-top: 30rpx;
						.product-info {
							display: flex;
							align-items: center;
							line-height: 80rpx;
							.name {
								flex: 1;
							}
							.number {
								width: 120rpx;
								text-align: center;
							}
							.price {
								width: 120rpx;
								text-align: center;
							}
						}
					}
					.kitchen-preview {
						border: 2rpx solid #ccc;
						font-size: 24rpx;
						padding: 0 30rpx;
						padding-top: 30rpx;
					}
				}
			}
		}
	}

	.footer-btn {
		position: fixed;
		bottom: 0%;
		left: 0%;
		width: 100%;
		height: 120rpx;
		display: flex;
		border-top: 1px solid #f3f4f6;
		align-items: center;
		justify-content: center;
		padding: 20rpx 50rpx;
		background-color: #fff;
		.btn {
			width: 45%;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #f3c45d;
			color: #fff;
			line-height: 100rpx;
			font-size: 30rpx;
			text-align: center;
		}
	}
}
.df {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fz {
	font-size: 34rpx;
}
.dashed {
	border-bottom: 1px dashed #b8b8b8;
	height: 2rpx;
}
</style>
